/*
This is the class css for classes page
*/
/*==========================================
   Table of Content
   note:file contain css for 3 pages classstep1.html,coursestep2.html,classstep2.html;
 ===========================================
 1.Header
 2.Main section
 3.Footer 
 */
 /*
1) Header Section.
*/
span.class-arrow1{
  @extend .frm-style;
  right: 20px;
margin-top: -52px;
}
span.class-arrow2{
  @extend .frm-style;
  right: 5px;
margin-top: -52px;
}

/*
      ============================================
                 main section start here
      ===========================================           
*/
 @media (min-width: $tablet) and (max-width: 1920px){
  .course-pdl{
    padding-left: 0;
  }
  .course-pdr{
    padding-right: 0;
  }
  .course-pdlr{
    padding-left: 0;
    padding-right: 0;
  }
}
  .time-sin{
    width:100% !important;
    color:$black;
  }
   .create-nav{
        border: 0px;
        margin-top: 25px;
        li{
             padding-left: 12px;
             padding-top: 3px;
             cursor:pointer;
             @media (min-width: $mobile) and (max-width: $mobile-max){
                float:none;
                padding-left: 0;
                border-bottom: 2px solid $white;       
              }
              @media (min-width: $mobile-max) and (max-width: 980px){
                  padding-left: 0;
                  
               }
              
             &:first-child{
              padding-left:0px; 
              
             }
            a{
              background-color: $black;
              color: $white;  
              border-radius: 0px;
              font-family: $verdana;
              padding-left: 42px;
                padding-top: 12px;
                padding-bottom: 12px;
                padding-right: 42px;
              font-weight: bold;
              font-size: 10px;
              text-transform: uppercase;
                @media (min-width: $mobile) and (max-width: $mobile-max){
                   text-align:center;
                }
                @media (min-width: $tablet) and (max-width: 980px){
                  padding: 10px 40px;
                }
    
              &:hover{
                 background-color:$yellow;
                 color: $black;
              }
                
            }
          } 
       }
       .create-class{
       .nav-tabs>li.active>a, .nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:focus {
         background-color:$yellow;
                 color: $black;
       }    
   }
/*
  my profile
*/
#venue-btn{
        	padding-left: 20px !important;
        	padding-right: 20px !important;
            font-size: 10px !important;

        }
   #teach{
   	padding-top: 20px;
       
   input[type="radio"]{
       display: none;
       margin-left: 10px;
       }
     input[type="radio"] + label:before {
         background-color: $black;
         border: 2px solid $black;
         content:"";
         border-radius: 7px;
         display: inline-block;
         color: $white;
         font-size: 12px;
         cursor: pointer;
         height: 14px;
         width:14px;
         line-height: 8px;
         vertical-align: middle;
         text-align: center;
         margin:-2px 6px 0 -20px;
     } 
      input[type="radio"]:checked + label:before {
        content:"\2022";
        text-align: center;
      }      //custom radio button must be update in main.scss
      .picture-select{
         padding-top: 20px;
          p{
            font-family: $verdana;
            text-transform: none;
            color: $dark_grey;
            font-size: 12px;
          }
          .picture-box{
             margin-top: 30px;
             h4{
                font-size: 12px;
                padding-top: 30px;
                padding-bottom: 35px;
                color: $dark_grey;
                text-transform: uppercase;
                font-family: $verdana;

             }
             .pic-srow{
              margin-top: 100px;
              margin-bottom: 20px;
              @media (min-width: $mobile) and (max-width: $tablet){
                margin-top: 0;
               }
             }
             .single-pic{
              float: left;
              width:210px;
              margin-top: 20px;
                    .pic-radio{
                        float: left;
                    }
                   .pic-upload{
                          position: relative;
                          a{
                            background: url('../img/site-icons.png') no-repeat -37px -69px;
                            width: 19px;
                            height: 18px;
                            position: absolute;
                            margin-left: -36%;
                            margin-top: -4%;
                          }
                          p{
                            vertical-align: top;
                            font-size: 12px;
                            color: $dark_grey;
                            text-transform: none;
                            font-family: $verdana;
                            position: relative;
                            display: inline-block;
                            span{
                              display: block;
                            }
                          }
                      }
                }
          }
          .pic-btn{
                 input[type=submit]
                 {
                   @include button($black,$white,$yellow,$black); 
                float: right;
                font-family: $verdana;
                text-transform: uppercase;
                font-size: 10px;
                font-weight: bold;
                margin-left: 20px;
                padding-left: 30px;
                padding-right: 30px;
                padding-top: 15px;
                padding-bottom: 15px;
                margin-top: 20px;
                 }
              a{
              @include button($black,$white,$yellow,$black); 
                float: right;
                font-family: $verdana;
                text-transform: uppercase;
                font-size: 10px;
                font-weight: bold;
                margin-left: 20px;
                padding-left: 30px;
                padding-right: 30px;
                padding-top: 15px;
                padding-bottom: 15px;
                margin-top: 20px;
               }
              }
          .picture-btn{
            border-top: 1px solid $light_grey;
            margin-top: 60px;
          }

      }

	     h3{
	     	color: $black;
	     	font-size: 30px;
	     	font-family: $lgr;
	     	text-transform: uppercase;
	     	border-bottom: 1px solid $light_grey;
	     	padding-bottom: 20px;
	     	padding-top: 20px;
	     	span{
	     		color: $dark_grey;
	     	}
	        
	     }
         .batch-first{

            a{
                @include button($black,$white,$yellow,$black); 
                float: right;
                font-family: $verdana;
                text-transform: uppercase;
                font-size: 10px;
                font-weight: bold;
                margin-left: 20px;
                padding-left: 20px;
                padding-right: 20px;
                padding-top: 15px;
                padding-bottom: 15px;
                margin-top: 20px;
             }
          }
          .batch-second{
            float:left;
            width: 100%;
            .my-radio{
                 label{
                     font-size: 12px;
                     text-transform: none;
                     padding-left: 22px;
                     color: $dark_grey;
                     cursor: pointer;
                 }
            }
            h3{
                margin-bottom: 20px;
            }
            .batch-disc{
                float: left;
                width:100%;
                padding-top: 30px;
                border-top: 1px solid $light_grey;
                border-bottom: 1px solid $light_grey;
                  font-size: 12px;
                  color: $black;
                  font-family: $verdana;
                  text-transform: uppercase;
                  .book-control{
                     height:50px !important;
                     margin-bottom: 23px;
                  }
                  .batch-flexible{
                          margin-top: 38px;
                          label{
                            color: $dark_grey;
                            font-size: 12px;
                            text-transform: none;
                            font-family: $verdana;
                            float: right;
                            cursor:pointer;
                          }
                      input[type="checkbox"]{
                         display: none;
                         }
                       input[type="checkbox"] + label:before {
                           background-color: $white;
                           color: $black;
                           border: 3px solid $black;
                           content:"";
                           display: inline-block;
                           cursor: pointer;
                           font-size: 12px;
                           height: 15px;
                           width:15px;
                           line-height: 10px;
                           vertical-align: middle;
                           margin:-2px 6px 0 -20px;
                       } 
                        input[type="checkbox"]:checked + label:before {
                          content:"\2713";
                          text-align: center;
                        }
                     }   
                  .add-disc{
                    a{
                        display: block;
                        margin-top: 0px;
                        margin-bottom: 14px;
                    }
                  }
                  h4{
                      font-size: 12px;
                      font-family: $verdana;
                      text-transform: uppercase;
                      font-weight: bold;
                      padding-bottom: 30px;
                  }
                  a{
                    color: $dark_grey;
                    margin-top: 36px;
                    text-transform: none;
                    font-size: 12px;
                    float: left;
                  }
                }
           }
       }  
       .class-struct{
        border-bottom: 1px solid $light_grey;
        float: left;
        width:100%;
                 h4{
                   color: $black;
                   font-size: 12px;
                   font-family: $verdana;
                   font-weight: bold;
                   text-transform: uppercase;
                   padding-top: 20px;
                   padding-bottom: 20px;
                  }
            .add-struct{
                    a{
                        display: block;
                        margin-top: 0px;
                        margin-bottom: 14px;
                        color: $dark_grey;
                        font-family: $verdana;
                        font-size: 12px;
                    }
                  }
              }
        .other-info{
            #info{
                min-height: 100px !important;
            }
            .ticket-day{
              max-width:200px;
            }
            .ticket-hour{
                max-width:200px;
            }
            .days{
              text-transform: none !important;
              color: $dark_grey !important;
              vertical-align: middle !important;
              font-weight: normal;
              padding-bottom: 18px;
            }
            .hours{
              text-transform: none !important;
              color: $dark_grey !important;
              vertical-align: middle !important;
              font-weight: normal;
              padding-bottom: 18px;
            }
            p{
                font-family: $verdana;
                font-weight: bold;
                font-size: 12px;
                color: $black;
                text-transform: uppercase;
                padding-bottom: 10px;
                span{
                    color: red;
                }

            }
            
            a{
               @include button($black,$white,$yellow,$black);
               float: right;
               font-family: $verdana;
               text-transform: uppercase;
               font-size: 10px;
               font-weight: bold; 

            }
            .batch-row{
              float: right;
              a{
                padding: 12px 22px;
              }
            }
            .save-row{
              float: right;
              width:100%;
              padding-top: 60px;
              a{
                padding:12px 40px;
                margin-right: 10px;
              }
              input[type=submit]
               {
               @include button($black,$white,$yellow,$black);
               float: right;
               font-family: $verdana;
               padding:12px 40px;
               text-transform: uppercase;
               font-size: 10px;
               font-weight: bold; 
               }
            }
        }
   .step-first{
    .continue-row{
        float:left;
        width: 100%;
         input[type=submit]
             {
              @include button($black,$white,$yellow,$black);
               float: right;
               font-family: $verdana;
               text-transform: uppercase;
               font-size: 10px;
                 padding:12px 40px;
               font-weight: bold; 
             }
          }
          #short-descr{
            height: 130px !important;
          }
          #descript{
            height: 240px !important;
          }
          #outcome{
             height: 130px !important;
          }
          #pre-req{
             height: 130px !important;
          }


   }           
  .venue-teach{
    padding-top: 50px;
    .dropdown-menu {
        margin-top: -12px;
       }
	     .teach-tab{
        float: left;
        width: 100%;
        position: relative;
        border: 0px;
        padding-left: 0;
        overflow-y:scroll;
       /* max-width: 300px;*/
        min-height: 560px; 
        @media (min-width: $mobile) and (max-width: $mobile-max){
        min-height : 300px !important;
        
         }
        li{
        	  list-style: none;
             cursor:pointer;
             padding-top: 60px;
             .close-btn{
              padding: 0;
              margin: 0;
              background: url('../img/site-icons.png') no-repeat -37px -69px;
              width: 19px;
              height: 18px;
              background-color: transparent;
              position: absolute;
              margin-top: -30px;
              margin-left: -5px;
              &:hover{
                background-color: transparent !important;
                text-decoration: none;
              }
             }
             &:first-child{
              padding-left:0px; 
              padding-top: 30px;
             }
            a{
                @include button($black,$white,$yellow,$black); 	
              background-color: $black;
              color: $white;  
              border-radius: 0px;
              font-family: $verdana;
              padding-left: 54px;
                padding-top: 17px;
                padding-bottom: 17px;
                padding-right: 54px;
              font-weight: bold;
              font-size: 14px;
              text-transform: uppercase;
              @media (min-width: $mobile) and (max-width: 780px){
                padding: 15px 30px;
        
               }
              &:hover{
                 background-color:$yellow;
                 color: $black;
              }
                
            }
          } 
       }

      }  
  .venue-form{
    float: left;
    width: 100%;
    color:$black;
    .form-group{
        width: 100%;
        float: left;

    }
    .fun-quote{
      font-family: $verdana;
      text-transform: uppercase;
      font-weight: bold;
      font-size:10px;
      .learn-me{
        text-align: right;
      }
    }
    .slider-horizontal{
            width:100% !important;
            margin-top:19px !important;
            .slider-section{
              border-shadow:0 !important;
              border-radius: 0 !important;
              background-image: none !important;
              background: $black !important;
            }
        }
    #description{
        height: 100px !important;
    }
    label
    {
    font-size: 12px;
    color: $black;
    font-family: $verdana;
    text-transform: uppercase;
    span{
        color:red;
    }
    }
    .book-control{
        height:50px !important;
        margin-bottom: 23px;
    }
  }        
